import React, {useEffect, useState} from 'react'
import { Form, Button, Modal, Row, Col, Input } from 'antd'


const FormItem = Form.Item;
const {TextArea} = Input;

const formLayout = {
  labelCol: { span: 7 },
};

const CreateForm = (props) => {
  const { onCancel, visible, current, onSubmit } = props;
  const [form] = Form.useForm();

  const onFormCancel = () => {
    form.resetFields();
    onCancel()
  };

  const handleSubmit = async () => {
    const filedValues = await form.validateFields();
    const id = current && current.id;
    onSubmit({id,...filedValues});
    form.resetFields();
  };

  const renderContent = () => {
    return (
      <Row gutter={24}>
        <Col span={24}>
          <FormItem label="手动终止原因" name="remarks" labelCol={{span: 5}} rules={[{required: true, message: '手动终止原因不能为空'}]}>
            <TextArea placeholder="请输入手动终止原因" rows={4} className='widthStyle'/>
          </FormItem>
        </Col>
      </Row>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => handleSubmit()}>确认</Button>
      </>
    )
  };

  return (
    <Modal
      title='终止'
      width={600}
      visible={visible}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Form {...formLayout} form={form}>
        {renderContent()}
      </Form>
    </Modal>
  )
};


export default (CreateForm)
